.bg-color{
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgb(255, 193, 24) 0%, rgb(249, 86, 41) 100%);
    }
    body{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    }
    h3{font-weight: 400; font-size: 24px;}
    h1{font-weight: 500; color: rgb(99, 57, 2);}
    h6{font-weight: 700; color: rgb(125, 124, 123);}
    .lungs{
        top: 140px;
        left: 100px;
        transform: scale(0.7);
        transition: 2s;
    }
    .lungs-ani{
        animation-name: lungs;
        transform: scale(1);
        
    }
    .lung-exhale-ani{
        animation-name: lung-exhale-ani;
        transform: scale(0.7);
        
    } 
    @keyframes lung-exhale-ani {
        0%   {transform: scale(1);}
        100% {transform: scale(0.7);}
    }
    .lungs:hover{
    transform: scale(1);
    }
    .process-line{
    position: relative;
    height: 15px;
    background-color: rgb(210, 225, 238);
    border-radius: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
    }
    #process-line{
    width: 0%;
    height: 100%;
    position: absolute;
    left: 0;
    background: linear-gradient(109.6deg, rgb(9, 154, 151) 11.2%, rgb(21, 205, 168) 91.1%);
    border-radius: 10px;
    animation-timing-function: linear;
    }
    .bubble {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), inset 0px 5px 10px 2px rgb(199, 246, 242);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), inset 0px 5px 10px 2px rgb(190, 255, 254);
    box-shadow: 0 5px 5px rgba(148, 119, 4, 0.2), inset 0px 5px 10px 2px rgb(255, 240, 200);
    height: 35px;
    position: absolute;
    width: 35px;
    transform: scale(1);
    transition: 2s;
    }
    #count{
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: rgb(238, 237, 240);
    }
    @keyframes lungs {
    0%   {transform: scale(0.7);}
    100% {transform: scale(1);}
    }
    .process-ani{
        animation-name:  process-line;
    }
    @keyframes process-line {
        0%   {width: 0%;}
        100% {width: 100%;}
    }

    .blione, .blitwo, .blithree, .blifour, .blifive,
    .bleone, .bletwo, .blethree, .blefour, .blefive,
    .brione, .britwo, .brithree, .brifour, .brifive,
    .breone, .bretwo, .brethree, .brefour, .brefive{
        animation-timing-function: linear;
        opacity: 0;
    }
    .hidden{ opacity: 0;}

    .blione{animation-name: bli-1; animation-duration: 6s;}
    .blitwo{animation-name: bli-2; animation-duration: 5s;}
    .blithree{animation-name: bli-3; animation-duration: 4s;}
    .blifour{animation-name: bli-4; animation-duration: 3s;}
    .blifive{animation-name: bli-5; animation-duration: 2s;}

    .bleone{animation-name: ble-1; animation-duration: 6s;}
    .bletwo{animation-name: ble-2; animation-duration: 5s; animation-delay: 1s;}
    .blethree{animation-name: ble-3; animation-duration: 4s; animation-delay: 4s;}
    .blefour{animation-name: ble-4; animation-duration: 3s; animation-delay: 6s;}
    .blefive{animation-name: ble-5; animation-duration: 2s; animation-delay: 8s;}

    .brione{animation-name: bri-1; animation-duration: 6s;}
    .britwo{animation-name: bri-2; animation-duration: 5s;}
    .brithree{animation-name: bri-3; animation-duration: 4s;}
    .brifour{animation-name: bri-4; animation-duration: 3s;}
    .brifive{animation-name: bri-5; animation-duration: 2s;}

    .breone{animation-name: bre-1; animation-duration: 6s;}
    .bretwo{animation-name: bre-2; animation-duration: 5s; animation-delay: 1s;}
    .brethree{animation-name: bre-3; animation-duration: 4s; animation-delay: 4s;}
    .brefour{animation-name: bre-4; animation-duration: 3s; animation-delay: 6s;}
    .brefive{animation-name: bre-5; animation-duration: 2s; animation-delay: 8s;}

    @keyframes bli-1 {
        0%   {top: 0; left: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bli-2 {
        0%   {top: 50px; left: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bli-3 {
        0%   {top: 100px; left: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bli-4 {
        0%   {top: 20px; left: 70px; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bli-5 {
        0%   {top: 80px; left: 70px; opacity: o;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        }

    @keyframes ble-1 {
        0%   {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:0; left:0; opacity: 0; transform: scale(1);}
        }
    @keyframes ble-2 {
        0%   {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:50px; left:0px; opacity: 0; transform: scale(1);}
        }
    @keyframes ble-3 {
        0%   {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:100px; left:0px; opacity: 0; transform: scale(1);}
        }
    @keyframes ble-4 {
        0%   {top:90px; left:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:20px; left:70px; opacity: 0; transform: scale(1);}
        }
    @keyframes ble-5 {
        0%   {top:90px; left:130px; opacity: o; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:80px; left:70px; opacity: 0; transform: scale(1);}
        }
    
    @keyframes bri-1 {
        0%   {top: 0; right: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bri-2 {
        0%   {top: 50px; right: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bri-3 {
        0%   {top: 100px; right: 0; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bri-4 {
        0%   {top: 20px; right: 70px; opacity: 0;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        }
    @keyframes bri-5 {
        0%   {top: 80px; right: 70px; opacity: o;}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        }

    @keyframes bre-1 {
        0%   {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:0; right:0; opacity: 0; transform: scale(1);}
        }
    @keyframes bre-2 {
        0%   {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:50px; right:0px; opacity: 0; transform: scale(1);}
        }
    @keyframes bre-3 {
        0%   {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:100px; right:0px; opacity: 0; transform: scale(1);}
        }
    @keyframes bre-4 {
        0%   {top:90px; right:130px; opacity: 0; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:20px; right:70px; opacity: 0; transform: scale(1);}
        }
    @keyframes bre-5 {
        0%   {top:90px; right:130px; opacity: o; transform: scale(.3);}
        5%   {opacity: 1;}
        95%   {opacity: 1; }
        100% {top:80px; right:70px; opacity: 0; transform: scale(1);}
        }
        
        
        
a {
text-decoration: none;
color: #010101;
cursor: pointer;
}

.button {
    display: block;
    width: 80%;
    padding: 14px 12px;
    margin: 0 auto;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(130deg, rgb(255 165 0), rgb(255 240 66));
    background-color: rgb(42, 39, 218);
    box-shadow: rgb(255 0 0 / 15%) 0px 4px 24px;
}
.button:hover{
    background: linear-gradient(130deg, rgb(255 240 66), rgb(255 165 0)); 
    box-shadow: rgb(255 0 0 / 25%) 0px 4px 24px;
}
.titel-bar{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    padding: 15px 5px 0;
}
.list-scheme-box{
    display: grid;
    grid-template-columns: 10fr 1fr;
    padding: 15px;
    margin: 15px 0;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.arrow-nav {
    display: grid;
    justify-content: center;
    align-content: center;
}
.arrow-nav span {
    font-size: 11px;
    background-color: #fff;
    padding: 5px 8px 3px 10px;
    border-radius: 100px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}